<template>
    <div v-if="resData" class="container">
        <div class="top flex-c-s">
            <img :src=resData.cardMainPic alt="" class="img">
            <div class="cardNews">
                <div class="flex-c-s">
                    <div style="width: 1rem;text-align: left;">Card Name：</div>{{resData.advCode }}
                </div>
                <div style="margin:0.3rem 0" class="flex-c-s">
                    <div style="width: 1rem;text-align: left;">Status：</div>
                    <div v-if="resData.status"
                        :style="{'background':returnState(resData.status).background,'padding':'0.1rem 0.3rem', 'border-radius':'0.15rem 0 0.35rem 0','color':'#fff'}">
                        {{returnState(resData.status).text}}
                    </div>
                </div>
                <div v-if="resData.currency" class="flex-c-s">
                    <div style="width: 1rem;text-align: left;">Face value：</div><img
                        style="width: 0.3rem;height: 0.3rem;" :src=returnCurimg(resData.currency) alt="">
                    <addCommas :value="resData.faceValue" :color="'#506CFF'" :fontSizeF="'0.24rem'" :fontWeight="800"
                        :fontSizeE="'0.24rem'" style="margin:0 0.1rem;"></addCommas>
                    <div
                        style="color: #506CFF;font-size: 0.2rem; line-height: 0.3rem;height: 0.3rem;margin-top:0.04rem">
                        {{resData.currency}}</div>
                </div>
            </div>
            <div class="tagBox">
                <div class="title">
                    标签：
                </div>
                <div class="tags flex-c-s" style="flex-wrap: wrap;">
                    <div v-for="(item,index) in resData.tags" :key="index" class="tag">
                        {{item}}
                    </div>
                </div>
            </div>

        </div>
        <div class="detailNews flex-c-s">
            <div style="width: 40%;" class="left">
                <div class="part flex-c-s">
                    <div class="name">
                        Order Numder：
                    </div>
                    <div class="content">
                        {{resData.orderNo}}
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Created Time：
                    </div>
                    <div v-if="resData.createTime" class="content">
                        {{dateFormater(resData.createTime,true)}}
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Seller
                    </div>
                    <div class="content">
                        {{resData.sellerName}}
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Service Provider
                    </div>
                    <div class="content">
                        {{resData.buyerName}}
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Rate
                    </div>
                    <div class="content">
                        {{resData.rate}}%
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Order Amount
                    </div>
                    <div class="content flex-c-s">
                        <img src="../../../assets/star.png"
                            style="width: 0.2rem;height: 0.2rem;margin-top:-0.05rem;margin-right: 0.05rem;" alt="">
                            <span>{{resData.points}}</span> <span style="margin: 0 0.1rem;color:#7481A7">Pts</span>   ≈  {{resData.amount}}<span style="margin-left:0.1rem;color:#7481A7">NGN</span>
                    </div>
                </div>
                <div class="part flex-c-s">
                    <div class="name">
                        Settle Amount
                    </div>
                    <div class="content flex-c-s">
                        <img src="../../../assets/star.png"
                            style="width: 0.2rem;height: 0.2rem;margin-top:-0.05rem;margin-right: 0.05rem;" alt="">
                    <span>{{resData.settlePoints}}</span> <span style="margin: 0 0.1rem;color:#7481A7">Pts</span>   ≈   {{resData.finalAmount}} <span style="margin-left:0.1rem;color:#7481A7">NGN</span>
                    </div>
                </div>
            </div>
            <div class="cardList flex-c-s">
                <div v-for="(item,index) in resData.detailList" class="cardPart">
                    <div class="imgList hover">
                        <img v-if="item.imgFront" @click="onPredivImage(0,[item.imgFront])" :src=item.imgFront alt="">
                        <img v-if="item.imgBack" @click="onPredivImage(0,[item.imgBack])" style="margin:0 0.2rem"
                            :src=item.imgBack alt="">
                        <img v-if="item.imgReceipt" @click="onPredivImage(0,[item.imgReceipt])" :src=item.imgReceipt
                            alt="">
                    </div>
                    <div class="cardNews flex-c-s">
                        <div class="flex-c-s" style="min-width: 1.7rem;text-align: left; ">
                            <div class="name">
                                Amount:
                            </div>
                            <div class="cont">
                                {{item.finalFaceValue}}
                            </div>
                        </div>
                        <div class="flex-c-s">
                            <div class="name">
                                Code：
                            </div>
                            <div class="cont">
                                {{item.cardCode}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="records">
            Movenment Records：
        </div>
        <div style="margin-top:0.3rem" class="tabelBox">
            <el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle" border="true" height="100%"
                :data="resData.statusRecordList" style="width: 100%">

                <el-table-column label="Create Time " prop="createTime">
                </el-table-column>
                <el-table-column label="Content" prop="message" />
                <el-table-column label="Images" prop="images">
                    <template #default="scope">
                        <div class="flex-c-c hover" v-if="scope.row.images">
                            <div v-for="(item,index) in scope.row.images.split(',')" ::key="index">
                                <img @click="onPredivImage(index,scope.row.images.split(',').slice(0,5))" v-if="item"
                                    style="width: 0.3rem;height: 0.3rem;margin-left: 0.2rem;" :src=item alt="">
                            </div>

                        </div>
                        <div v-else>
                            none
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="Description" prop="memo">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script setup>
    import { ref, reactive, onMounted } from 'vue'
    import { orderDetail } from '@/api/order.js'
    import { apiDict } from '@/api/user.js'
    import { returnState } from "@/utils/regular.js"
    import { dateFormater } from '@/utils/dateFormater'
    import addCommas from '@/components/popup/addCommas.vue'
    import { preview } from 'v-preview-image'
    import { useRoute } from 'vue-router'
    const route = useRoute()
    const currencyList = ref([])
    onMounted(() => {
        const orderNo = route.query.orderNo
        if (!orderNo) return
        getData(orderNo)
        getApiDict()
    })
    const getApiDict = async () => {
        const res = await apiDict({ code: 'currency' })
        currencyList.value = res.data.records

    }
    const returnCurimg = (data) => {
        let part = currencyList.value.find(item => {
            return item.subCode == data
        })
        return (part && part.value) || ''
    }
    const resData = ref({})
    const getData = async (orderNo) => {
        const res = await orderDetail({ orderNo })
        console.log(res)
        resData.value = res.data
    }

    const onPredivImage = (index, arr) => {
        preview(index, arr)
    }

    const headerCellStyle = reactive({
        'background': '#E1ECFF',
        'text-align': 'center',
        'color': '#666',
        'font-family': 'avenir500',
        'font-size': '0.16rem',
        'font-weight': '500',
        'height': '0.6rem',
        'box-sizing': 'border-box'
    })
    const cellStyle = reactive({
        'text-align': 'center',
        'color': '#666',
        'font-family': 'avenir500',
        'font-size': '0.16rem',
        'font-weight': '500',
        'height': '0.6rem',
        'box-sizing': 'border-box'
    })
</script>

<style lang="less" scoped>
    .container {
        width: 100%;
        padding: 0.4rem;
        box-sizing: border-box;

        .top {
            .img {
                height: 1.5rem;
                border-radius: 0.2rem;
            }

            .cardNews {
                font-size: 0.16rem;
                font-family: ff500;
                font-weight: 600;
                color: #000;
                height: 1.5rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 1rem;
            }

            .tagBox {
                height: 1.5rem;
                margin-left: 1rem;

                .title {
                    text-align: left;
                    font-size: 0.2rem;
                    font-family: ff500;
                    font-weight: 600;
                    color: #000;
                    margin-bottom: 0.4rem;

                }
            }

            .tags {
                .tag {
                    padding: 0.05rem 0.3rem;
                    border: 0.01rem solid #7481A7;
                    color: #7481A7;
                    border-radius: 0.2rem;
                    font-size: 0.2rem;
                    margin-right: 0.2rem;
                }
            }


        }

        .detailNews {
            margin-top: 0.5rem;

            .left {
                .part {
                    margin-top: 0.3rem;

                    .name {
                        font-size: 0.2rem;
                        font-family: ff500;
                        font-weight: 500;
                        color: #7481A8;
                        width: 2rem;
                        text-align: left;
                    }

                    .content {
                        font-size: 0.2rem;
                        font-family: ff500;
                        font-weight: 600;
                        color: #0E0F41;
                    }
                }
            }

            .cardList {
                min-height: 3rem;
                display: flex;
                flex-direction: column;

                .cardPart {
                    margin-top: 0.2rem;

                    .imgList {
                        img {
                            width: 1.5rem;
                            height: 1rem;
                        }
                    }

                    .cardNews {
                        font-size: 0.16rem;
                        font-family: ff500;
                        font-weight: 600;

                        .name {
                            color: #606892;

                        }

                        .cont {
                            color: #0E0F41;
                            margin-left: 0.05rem;
                        }
                    }
                }
            }
        }

        .records {
            font-size: 0.32rem;
            font-family: ff500;
            font-weight: 600;
            color: #0E0F41;
            text-align: left;
            margin-top: 0.5rem;
        }
    }
</style>